<template>
  <el-cascader
    v-bind="{ ...item }"
    v-model="changeValue"
    popper-class="t-cascader-popper"
    :options="getOptions()"
  />
</template>

<script name="TCascader" setup>
import { findLabelsByIds } from "@/views/formgen/components/GenerateForm/FormItemLabel";
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { watch } from "vue";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits([...formEmits, "changeLabel"]);

const { changeValue, getOptions } = useFormItem(props, emits, true);

watch(
  () => changeValue.value,
  val => {
    emits("changeLabel", findLabelsByIds(getOptions(), val));
  }
);
</script>

<style scoped></style>
